import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface FirePredictionProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;

  // 图标配置
  iconPath?: string;
  iconSize?: number;

  // 标题配置
  title?: string;
  titleFontSize?: number;
  titleColor?: string;
  titleFontFamily?: string;
  titleFontWeight?: number;
  titleLineHeight?: number;

  // 指示器配置
  showIndicator?: boolean;
  indicatorSize?: number;
  indicatorColor?: string;
  indicatorOpacity?: number;

  // 数值配置
  value?: string | number;
  valueFontSize?: number;
  valueColor?: string;
  valueFontFamily?: string;
  valueFontWeight?: number;
  valueLineHeight?: number;
  valueLetterSpacing?: number;
  valueBackground?: string;

  // 数值背景配置
  showValueBackground?: boolean;
  valueBackgroundWidth?: number;
  valueBackgroundHeight?: number;
  valueBackgroundGradientStart?: string;
  valueBackgroundGradientEnd?: string;
  valueBackgroundOpacity?: number;

  // 布局配置
  layout?: 'horizontal' | 'vertical';
  spacing?: number;

  // 事件
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const FirePrediction = forwardRef<HTMLDivElement, FirePredictionProps>((props, ref) => {
  const {
    // 容器样式
    width = 200,
    height = 102,
    backgroundColor = 'transparent',
    borderRadius = 0,

    // 图标配置
    iconPath = 'http://localhost:8085/static/images/xiaofanganquan/01.png',
    iconSize = 60,

    // 标题配置
    title = '易燃指数',
    titleFontSize = 16,
    titleColor = '#FFFFFF',
    titleFontFamily = 'SourceHanSansSC',
    titleFontWeight = 400,
    titleLineHeight = 22,

    // 指示器配置
    showIndicator = true,
    indicatorSize = 17,
    indicatorColor = '#FFFFFF',
    indicatorOpacity = 0.6,

    // 数值配置
    value = '0.70',
    valueFontSize = 24,
    valueColor = 'rgba(26,215,255,1)',
    valueFontFamily = 'DINAlternate',
    valueFontWeight = 700,
    valueLineHeight = 30,
    valueLetterSpacing = 0.86,
    valueBackground = 'linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%)',

    // 数值背景配置
    showValueBackground = true,
    valueBackgroundWidth = 80,
    valueBackgroundHeight = 30,
    valueBackgroundGradientStart = 'rgba(52,165,255,0)',
    valueBackgroundGradientEnd = 'rgba(0,139,255,0)',
    valueBackgroundOpacity = 0.65,

    // 布局配置
    layout = 'horizontal',
    spacing = 16,

    // 事件
    onClick,

    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const containerStyle: React.CSSProperties = {
    width: `${width}px`,
    height: `${height}px`,
    background: backgroundColor,
    borderRadius: `${borderRadius}px`,
    display: 'flex',
    flexDirection: layout === 'horizontal' ? 'row' : 'column',
    alignItems: 'center',
    justifyContent: layout === 'horizontal' ? 'space-evenly' : 'center',
    padding: '10px 5%',
    boxSizing: 'border-box',
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 0.3s ease',
    ...style
  };

  const iconStyle: React.CSSProperties = {
    width: `${iconSize}px`,
    height: `${iconSize}px`,
    backgroundImage: `url(${iconPath})`,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    flexShrink: 0,
    marginRight: layout === 'horizontal' ? `${spacing}px` : '0',
    marginBottom: layout === 'vertical' ? `${spacing}px` : '0'
  };

  const titleStyle: React.CSSProperties = {
    fontSize: `${titleFontSize}px`,
    color: titleColor,
    fontFamily: titleFontFamily,
    fontWeight: titleFontWeight,
    lineHeight: `${titleLineHeight}px`,
    textAlign: 'left',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    marginRight: layout === 'horizontal' ? `${spacing}px` : '0',
    marginBottom: layout === 'vertical' ? `${spacing}px` : '0'
  };

  const indicatorStyle: React.CSSProperties = {
    width: `${indicatorSize}px`,
    height: `${indicatorSize}px`,
    borderRadius: '50%',
    color: 'rgba(255,255,255,0.9)',
    border: '1px solid rgba(255,255,255,0.9)',
  };

  const valueBackgroundStyle: React.CSSProperties = {
    width: `${valueBackgroundWidth}px`,
    height: `${valueBackgroundHeight}px`,
    background: `linear-gradient(90deg, ${valueBackgroundGradientStart} 0%, rgba(52,165,255,0.39) 27%, rgba(52,165,255,0.45) 51%, rgba(52,165,255,0.35) 79%, ${valueBackgroundGradientEnd} 100%)`,
    opacity: valueBackgroundOpacity,
    borderRadius: '4px',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };

  const valueStyle: React.CSSProperties = {
    fontSize: `${valueFontSize}px`,
    color: valueColor,
    fontFamily: valueFontFamily,
    fontWeight: valueFontWeight,
    lineHeight: `${valueLineHeight}px`,
    letterSpacing: `${valueLetterSpacing}px`,
    textAlign: 'center',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    background: valueBackground,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    position: 'relative',
    zIndex: 1,
  };

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const firePredictionClassName = ['fire-prediction', className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={firePredictionClassName}
      style={containerStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="left-wrap">
        {/* 图标 */}
        <div className="fire-prediction__icon" style={iconStyle} />

        {/* 标题 */}
        <div className="fire-prediction__title" style={titleStyle}>
          {title}
        </div>

        {/* 指示器 */}
        {showIndicator && (
          <div className="fire-prediction__indicator" style={indicatorStyle}>?</div>
        )}
      </div>


      {/* 数值背景 */}
      {showValueBackground && (
        <div className="fire-prediction__value-background" style={valueBackgroundStyle}>
          {/* 数值 */}
          <div className="fire-prediction__value" style={{}}>
            {value}
          </div>
        </div>
      )}

      {/* 如果没有背景，直接显示数值 */}
      {!showValueBackground && (
        <div className="fire-prediction__value" style={valueStyle}>
          {value}
        </div>
      )}
    </div>
  );
});

FirePrediction.displayName = 'FirePrediction';

export default FirePrediction;
